<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <!-- online jQuery
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js" type="text/javascript"></script>
        <script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/bgiframe/jquery.bgiframe.min.js" type="text/javascript"></script>
        <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
        -->

        <!-- complete jQuery with UI and plugins -->
        <!--
        <script src="js/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
        <script src="js/jquery/jquery-ui-1.7.core.js" type="text/javascript"></script>
        <script src="js/jquery/jquery-ui-1.7.dialog.js" type="text/javascript"></script>
        <script src="js/jquery/jquery-ui-1.7.sortable.js" type="text/javascript"></script>
        -->

        <script src="js/jquery/everything_packed.js" type="text/javascript"></script>


        <!-- jQuery UI css -->
        <link href="css/jquery/jquery-ui-1.7.1.custom.css"
              media="all" rel="stylesheet" type="text/css" />

        <!-- dropdown styles -->
        <!--
        <link href="css/dropdown/dropdown.css" media="all" rel="stylesheet" type="text/css" />
        <link href="css/dropdown/themes/default/default.css" media="all" rel="stylesheet" type="text/css" />
        -->


        <!--[if lt IE 7]>
        <script type="text/javascript" src="js/jquery/jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="js/jquery.dropdown.js"></script>
        <![endif]-->


        <script type="text/javascript">
            jQuery(function() {

                // set up debug window
                jQuery("#debug")
                .dialog({
                    position: ['right','bottom'],
                    width: 650,
                    heigth: 250,
                    buttons: {
                        "Clear": function (){
                            jQuery("#debug").html("");
                        }

                    }
                });

                // set up messages window
                jQuery("#messages")
                .dialog({
                    autoOpen: true,
                    position: ['right','top'],
                    width: 250,
                    heigth: 100,
                    show: 'slide',
                    hide: 'slide'

                });

                // make all lists sortable
                jQuery("#menu ul").each(function(){
                    jQuery(this)
                        .sortable({
                            over: function(event, ui) {
                                //debug("over event " + event);

                            },

                            update: function(event, ui){
                                sendMenuStructureUpdate("itemId", "newParentId", 1);
                            },


                            connectWith: ['#menu ul'],
                            cursor: 'crosshair',

                            containment: 'document',

                            revert: true

                        });

                        /*
                     var connected = jQuery(this).sortable('option', 'connectWith');
                     for(var i=0;i<connected.length; i++) {
                        debug(this.id + " -> " + connected[i].id);
                     }
                        */

                });

                //jQuery("#ul_1").sortable('option', 'connectWith', '.otherlist');

                // connect every sortable list with each other
                var connCoutn = 0;
                jQuery("#menu ul").each(function(){
                     debug(this.id + ":");
                     var connected = jQuery(this)
                        .sortable('option', 'connectWith');
                     for(var i=0;i<connected.length; i++) {
                        debug("---> " + connected[i].id);
                     }

                    /*
                    jQuery(this)
                        .sortable('option', 'connectWith', '#menu ul');

                        connCoutn++;
                        debug("connected " + connCoutn);
                    */
                });
            });

            function sendMenuStructureUpdate(itemId, newParentId, newPosition){
                var url = "";

                /*
                jQuery.post(
                url,
                {
                    itemId: itemId,
                    newParentId: newParentId,
                    newPosition: newPosition
                },
                function (data, textStatus) {
                    // data could be xmlDoc, jsonObj, html, text, etc...
                    //this; // the options for this ajax request

                    showMessage(data);

                },
                "text");
                */
            }

            function debug(text){
                jQuery("#debug")
                .append(new Date() + ": " + text + "<br/>");
            }

            function showMessage(text){
                var messagesDiv = jQuery("#messages")
                .html(text)
                .show("very fast");

                for(var i=0; i<100000; i++){
                    var a = "a";
                }

                messagesDiv.fadeOut("very slow");
            }

        </script>

    </head>
    <body>
        <div id="menu">
            <ul id="ul_1">
                <li>aaa</li>
                <li>bbb</li>
                <li>ccc</li>
                <li>ddd</li>
                <li>eee</li>
                <li>fff</li>
                <li>ggg</li>
            </ul>

            asas

            <ul id="ul_2" class="otherlist">
                <li>aaa - 2</li>
                <li>bbb - 2</li>
                <li>ccc - 2</li>
                <li>ddd - 2</li>
                <li>eee - 2</li>
                <li>fff - 2</li>
                <li>ggg - 2</li>
            </ul>

        </div>
       

        <div id="messages" title="Messages"/>
        <div id="debug" title="Debug" />
    </body>
</html>